<template>
	<view>
		<view class="data-top">
			<u-steps :list="numList"  mode="number" :current="num"></u-steps>
		</view>
	 <view class="data-title">
	 	  <text>选择取车日期</text>
	 </view>
	 <view class="">
	 	<uni-calendar @change="change" :insert="true" :selected="selected" :showMonth="false" />
	 </view>
	 <view class="data-nine"></view>
	 <view class="data-title">
	 	  <text>选择预约取车时间段</text>
	 </view>
	 <view class="data-check">
	 	 <view v-for="(item,index) in items" class="data-item  d-flex a-center">
	 	 	  <radio color="#3179F3" :value="item.value" :checked="index == item.value" />
			  <text>{{item.name}}</text>
	 	 </view>    
	 </view>
	 <view @click="nextStep" class="subsend mt-2">
	 	下一步
	 </view>
	 
	 
	 
	</view>
</template>

<script>
	import uniCalendar from '@/components/uni-ui/uni-calendar/uni-calendar.vue'
	
	export default {
	   components:{
		   uniCalendar
	   },
		data(){
			return{
				num:0,
				numList: [{
					id:1,
					name: '选择时间'
				}, {
					id:2,
					name: '填写信息'
				}, {
					id:3,
					name: '支付方式'
				}, {
					id:4,
					name: '提交预约'
				}, ],
				items: [{
                    value: '0',
                    name: '08:00~10.00'
                },
                {
                    value: '1',
                    name: '08:00~10.00',
                },
                {
                    value: '2',
                    name: '08:00~10.00'
                },
				{
				    value: '3',
				    name: '08:00~10.00'
				}],
           
			}
		},
		methods:{
			xiay(){
				this.num++
			},
			nextStep(){
				uni.navigateTo({
					url:'./fillInfo'
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		padding-bottom: 100rpx;
	}
  .data-top{
	  width: 100%;
	  height: 175rpx;
	  background: #F1F5F8;
	  padding-top: 35rpx;
  }
  .data-title{
  	  
  	  width: 700rpx;
  	  height: 40rpx;
      font-size: 35rpx;
      font-weight: bold;
  	  border-left: 3px solid #007BFF;
  	  padding-left: 20rpx;
  	  line-height: 40rpx;
  	  margin:  40rpx auto;
  	  display: flex;
  	  justify-content: space-between;
  	  align-items: center;
  	
  }
  .data-nine{
	  width: 100%;
	  height: 30rpx;
	  background-color: #F2F5FA;
  }
.data-check{
	width: 100%;
	height: 200rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	// align-items: center;
	border-top: 1px solid #F4F5F6;
	padding: 0 40rpx;
}
  .data-item{
     width: 300rpx;
	 height: 100rpx;
	 // border: 1px solid #CCCCCC;
  }
  .subsend{
	  background-color:#3179F3;
	  color: #FFFFFF;
	  width:700rpx;
	  height: 95rpx;
	  border-radius: 30rpx;
	  font-size: 32rpx;
	  text-align: center;
	  line-height: 95rpx;
	  margin:  0 auto;
  }
</style>